<!-- pages/service/index.vue -->
<template>
  <view class="container">
	  <quick-button></quick-button>
<!--    顶部状态栏和搜索栏
    <view class="status-bar">
      <text class="time">16:27</text>
      <view class="right-icons">
        <image class="icon" src="/static/icons/eye.png"></image>
        <image class="icon" src="/static/icons/bell.png"></image>
        <image class="icon" src="/static/icons/signal.png"></image>
        <image class="icon" src="/static/icons/wifi.png"></image>
        <image class="icon" src="/static/icons/battery.png"></image>
        <text class="signal">66</text>
      </view>
    </view> -->

    <!-- 搜索栏 -->
    <view class="search-bar" @click="navToSearchList">
      <icon type="search" size="14" color="#999"></icon>
      <input class="search-input" placeholder="请输入服务项目" disabled />
      <view class="more-icon">
        <icon type="more" size="20" color="#000"></icon>
      </view>
    </view>

    <!-- 医院信息卡片 -->
    <view class="hospital-card">
      <image class="hospital-logo" :src="fileName"></image>
      <view class="hospital-info">
        <view class="hospital-name">{{ hospitalAme }}</view>
        <view class="hospital-address">
          <icon class="location-icon" type="location" color="#00D3A1" size="14"></icon>
          <text>{{ detailAddress }}</text>
        </view>
<!--        <view class="intro-link">查看简介 ></view> -->
      </view>
    </view>

    <!-- 导航标签栏 -->
    <scroll-view scroll-x class="nav-tabs" enhanced show-scrollbar="false">
      <view class="tab-item active">服务项目</view>
   <!--   <view class="tab-item">服务评价</view> -->
      <view class="indicator"></view>
    </scroll-view>

    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 左侧分类列表 -->
      <view class="category-list">
        <view 
          v-for="(category, index) in categories" 
          :key="index"
          :class="['category-item', currentCategory === index ? 'active' : '']"
          @tap="switchCategory(index)" @click="medicalDetails(category)"
        >
          {{ category.proFirstClass }}
        </view>
      </view>

      <!-- 右侧服务列表 -->
      <view class="service-list">
        <block v-for="(service, serviceIndex) in filteredServices" :key="serviceIndex">
          <view class="service-item" @click="navToDetails(service)">
            <image class="service-image" :src="service.picImg" mode="aspectFill"></image>
            <view class="service-info">
              <view class="service-name">{{ service.proName}}</view>
              <view class="service-price">
                <text class="price-value">{{ service.actualPrice }}</text>
                <text class="price-unit">/次 起</text>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>

 <!--  底部个人中心
    <view class="footer">
      <view class="footer-icon">
        <image src="../static/home_icon.png"></image>
      </view>
      <text @click="show">首页</text>
    </view> -->
 
  
 <view>
  		<u-tabbar style="height: 60px" :value="tabbarValue" @change="onTabbarChange" :safeAreaInsetBottom="false">
  			<u-tabbar-item text="护士上门" @click="show">>
  				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../static/home_icon.png"></image>
  				<image class="u-page__item__slot-icon" slot="active-icon" src="../static/home_select_icon.png"></image>
  			</u-tabbar-item>
  			<u-tabbar-item text="订单" @click="myOrderList">>
  				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../static/server_icon.png"></image>
  				<image class="u-page__item__slot-icon" slot="active-icon" src="../static/server_select_icon.png">
  				</image>
  			</u-tabbar-item>
  		</u-tabbar>
		</view>
		 </view>
</template>

<script>
import * as medicalProjects from "../../common/api/medicalProjects.js";
import * as hospitalInfo from "../../common/api/hospitalInfo.js";
export default {
  data() {
    return {
	  current: 0,
      currentCategory: '',
	  initCurrentCode:'',
	  hospitalAme:'',
	  detailAddress:'',
	  fileName:'',
      // categories: [
      //   { name: '管道维护', id: 1 },
      //   { name: '皮肤护理', id: 2 },
      //   { name: '常规护理', id: 3 },
      //   { name: '母婴护理', id: 4 },
      //   { name: '中医理疗', id: 5 },
      //   { name: '居家康复', id: 6 },
      //   { name: '特殊护理', id: 7 },
      //   { name: '标签', id: 8 }
      // ],
	  categories: [],
      // services: [
      //   {
      //     category: 0,
      //     name: '鼻饲（胃管护理）',
      //     price: '¥174.50',
      //     image: '/static/images/service1.png'
      //   },
      //   {
      //     category: 0,
      //     name: '留置/更换尿管护理',
      //     price: '¥176.50',
      //     image: '/static/images/service2.png'
      //   },
      //   {
      //     category: 0,
      //     name: '输液港维护',
      //     price: '¥168.50',
      //     image: '/static/images/service3.png'
      //   },
      //   {
      //     category: 0,
      //     name: 'PICC置管维护',
      //     price: '¥168.50',
      //     image: '/static/images/service4.png'
      //   },
      //   {
      //     category: 0,
      //     name: '更换胃/空肠造瘘管',
      //     price: '¥398.50',
      //     image: '/static/images/service5.png'
      //   }
      // ],
	  services: [],
      filteredServices: []
    }
  },
  computed: {
  	topAreaGridList() {
  		const splitArray = (array, chunkSize) => {
  			const result = [];
  			const length = array.length;
  			for (let i = 0; i < length; i += chunkSize) {
  				const chunk = array.slice(i, i + chunkSize);
  				result.push(chunk);
  			}
  			return result;
  		};
  		const list = splitArray(this.filteredServices, 6);
  		return list;
  	},
  },
  onLoad(opt) {
	  if(opt.hospitalName){
	  	this.initCurrentCode = opt.hospitalName
	  	this.getDeviceInfo()
	  }
         const param = {
	  		hospitalName:opt.hospitalName
	  	}
	  medicalProjects.selectProFirstClass(
	  	param).then(result => {
	  	this.filteredServices = result.data.data || []
	  }).catch(error => {
	  	console.log(error);
	  })

	  hospitalInfo.queryByPage(
	  	param).then(result => {
			console.log(result);
	  	this.hospitalAme = result.data.data.rows[0].hospitalAme || []
		this.fileName = result.data.data.rows[0].fileName || []
		this.detailAddress = result.data.data.rows[0].detailAddress || []
	  }).catch(error => {
	  	console.log(error);
	  })
    // this.filteredServices = this.services.filter(item => item.proName === this.currentCategory);
	  // this.filteredServices = this.categories
  },
    onShow: function () {
      wx.hideHomeButton({
        success: function () {
          console.log("hide home success");
        },
        fail: function () {
          console.log("hide home fail");
        },
        complete: function () {
          console.log("hide home complete");
        },
      });
    },

  methods: {
	  onSwiperChange(e) {
	  	this.current = e.detail.current;
	  },
	  navToSearchList() {
	  	uni.navigateTo({
	  		url: "/patientAppPages/pages/searchList/searchList",
	  	});
	  },
	  show() {
	  	uni.navigateTo({
	  		url: "/patientAppPages/pages/index/index",
	  	});
	  },
	  myOrderList() {
	  	uni.navigateTo({
	  		url: "/patientAppPages/pages/myOrderList/myOrderList",
	  	});
	  },
       navToDetails(service) {
			uni.navigateTo({
				url:"/patientAppPages/pages/serviceDetails/serviceDetails?uid=" +service.projectsUid+"&hospitalUid="+service.hospitalUid+"&hospitalName="+service.hospitalName+"&type="+"医院"})
		},
	  getDeviceInfo() {
	  	const param = {
	  		hospitalName:this.initCurrentCode
	  	}
	  	medicalProjects.selectMedicalProject(
	  		param).then(result => {
	  		this.categories = result.data.data || []
	  	}).catch(error => {
	  		console.log(error);
	  	})
	  },
	  medicalDetails(category) {
	  	const param = {
	  		hospitalName:category.hospitalName,
			proFirstClassUid:category.proFirstClassUid
	  	}
	  	medicalProjects.selectProFirstClass(
	  		param).then(result => {
	  		this.filteredServices = result.data.data || []
	  	}).catch(error => {
	  		console.log(error);
	  	})
	  },
    switchCategory(index) {
      this.currentCategory = index;
      this.filteredServices = this.services.filter(item => item.category === index);
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 120rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 30rpx;
  font-size: 28rpx;
  color: #333;
}

.right-icons {
  display: flex;
  align-items: center;
}

.icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 10rpx;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #f0f0f0;
  border-radius: 40rpx;
  margin: 20rpx 30rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 0 20rpx;
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #999;
}

.more-icon {
  margin-left: 20rpx;
}

/* 医院卡片 */
.hospital-card {
  margin: 20rpx 30rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.hospital-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 20rpx;
}

.hospital-info {
  flex: 1;
}

.hospital-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.hospital-address {
  font-size: 26rpx;
  color: #666;
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.intro-link {
  font-size: 28rpx;
  color: #00D3A1;
}

/* 导航标签栏 */
.nav-tabs {
  white-space: nowrap;
  padding: 0 30rpx;
  margin-top: 20rpx;
}

.tab-item {
  display: inline-block;
  padding: 15rpx 30rpx;
  font-size: 32rpx;
  position: relative;
}

.tab-item.active {
  color: #000;
  font-weight: bold;
}

.indicator {
  position: absolute;
  bottom: 0;
  left: 30rpx;
  width: 100rpx;
  height: 6rpx;
  background-color: #00D3A1;
  border-radius: 3rpx;
}

/* 主内容区 */
.main-content {
  display: flex;
  padding: 0 30rpx;
}

.category-list {
  width: 180rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx 0;
  margin-right: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.category-item {
  padding: 20rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}

.category-item.active {
  color: #00D3A1;
  position: relative;
}

.category-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24rpx;
  height: 6rpx;
  background-color: #00D3A1;
  border-radius: 3rpx;
}

.service-list {
  flex: 1;
}

.service-item {
  display: flex;
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.service-image {
  width: 200rpx;
  height: 200rpx;
  flex-shrink: 0;
}

.service-info {
  padding: 20rpx 30rpx;
  flex: 1;
}

.service-name {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.service-price {
  display: flex;
  align-items: center;
}

.price-value {
  font-size: 36rpx;
  color: #FF4D4F;
  font-weight: bold;
}

.price-unit {
  font-size: 26rpx;
  color: #999;
  margin-left: 10rpx;
}

/* 底部个人中心 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.footer-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 10rpx;
}
</style>